<template>
  <!-- Vue3组件中的模板结构可以没有跟标签，例如：div -->
  <h1>我是Demo组件</h1>
  <h1>一个人的信息：</h1>
  <h2 v-show="person.name">姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>

  <!-- 插槽：定义一个名为 'qwe' 的具名插槽 -->
  <slot name="qwe"></slot>
  <!-- 我是默认插槽，如果使用了name属性的话，就是具名插槽 -->
  <slot></slot>

  <br>
  <button @click="test">测试触发一下Demo组件的Hello事件</button>
</template>

<script>
// 引入ref 函数
import {reactive} from "vue";

export default {
  name: 'DemoPage',
  props: ['msg', 'school', 'nativeClick'],
  emits: ['hello'], // Vue3全新配置项emits
  // // - setup执行的时机：在beforeCreate之前执行一次，this是undefined。
  // beforeCreate() {
  //   console.log("================== beforeCreate执行了，其this值： =================", this);
  // },

  // setup: function () {
  //
  // }

  // Vue3引入了新的配置项，值是一个函数，setup是所有Composition API（组合API）“ 表演的舞台 ”。
  // 组件中所用到的：数据、方法等等，均要配置在setup中。
  // - setup函数的两种返回值：
  //    - 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。【重点关注！】
  //    - 若返回一个渲染函数：则可以自定义渲染内容。【了解】
  setup(props, context) {
    // // - setup执行的时机：在beforeCreate之前执行一次，this是undefined。
    // console.log("================= setup执行了，其this值： ==================", this);

    // 可以获取到从App组件获取到Demo组件传递过来的参数props的值
    console.log('从App组件获取到Demo组件传递过来的参数props：', props.msg, props.school);
    console.log('context参数的attrs值：', context.attrs);
    console.log('context参数的emit值：', context.emit);
    console.log('context参数的expose值：', context.expose);
    console.log('context参数的slots值：', context.slots);

    // 【todo 通过 reactive 封装整个对象的方式来实现数据的响应式】
    let person = reactive({
      name: '张三',
      age: 18,
    });

    // 方法
    function test() {
      // 其中参数一是helo，代表的是自定义事件，其中hello这个自定义事件是放在App组件的Demo标签上的
      context.emit('hello', 9999);
    }

    // 方式一：返回对象【常用】
    return {
      person,
      test,
    }
  },
}
</script>

<style>

</style>
